<template>
    <div id="host">
        <van-row>
            <van-col span="8" offset="1">
                <van-image
                        round
                        width="100px"
                        height="100px"
                        src="http://127.0.0.1:8081/getImage/466f932d-b8c6-4663-9329-379f3152ff54wallhaven-0pwkje.jpg"
                        @click="onImage"
                />
            </van-col>
            <van-col>
                <div style="height: 30px"></div>
                <span style="font-size: 30px">{{ phone }}</span>
            </van-col>
        </van-row>

        <div style="height: 30px"></div>

        <van-cell title="常用功能"  @click="onAddress"/>
        <van-grid>
            <van-grid-item icon="https://gitee.com/dhymon/figurebed/raw/master/img/红包.png" text="红包卡卷" @click="onPacket"/>
            <van-grid-item icon="https://gitee.com/dhymon/figurebed/raw/master/img/关注.png" text="店铺关注" @click="onFocus"/>
            <van-grid-item icon="https://gitee.com/dhymon/figurebed/raw/master/img/服务评价-客服.png" text="客服" @click="onService"/>
            <van-grid-item icon="https://gitee.com/dhymon/figurebed/raw/master/img/地址.png" text="地址" @click="onAddress"/>
        </van-grid>



    </div>
</template>

<script>
    export default {
        name: "Host",
        data(){
            return {
                name: 'dhy',
                phone: 13250580894,
            }
        },
        methods:{
            onAddress(){
                this.$router.push('/address')
            },
            onPacket(){
                this.$router.push('/packet')
            },
            onFocus(){
                this.$router.push('/focus')
            },
            onService(){
                this.$router.push('/service')
            },
            onImage(){
                //创建input
                const upload = document.createElement("input");
                //设置type为file
                upload.type = "file";
                //类型
                upload.accept = "image/*";
                //添加onchange事件
                upload.onchange = this.setFile;
                //模拟点击
                upload.click();
            },
            setFile(e){
                console.log(e);
                //获取文件
                const file = e.path[0].files[0];
                console.log(file);
                //将其放入formdata中方便上传
                const formData = new FormData();
                formData.append("file", file);
                axios.post('http://127.0.0.1:8081/upload',formData)
                .then(res=>{
                    console.log(res);
                })
            }
        }
    }
</script>

<style scoped>
    #host{
        text-align: left;
    }
</style>